<style>
    th,td
    {
        text-align:center;
    }
</style>
<div style="margin:0 auto;">
    <div style="margin-top:20px;">
    <!--<h1 style="text-align: center">Merchant rejected</h1>-->

    <div >
        <table class="table table-bordered" align="center">
            <thead>
            <th>index</th><th>mName</th><th>shopName</th><th>address</th><th>createTime</th><th>operator</th>
            </thead>
            <tbody>
            <tr ng-repeat="merchant in merchants">
                <td>{{$index+1}}</td>
                <td>{{merchant.mName}}</td>
                <td>{{merchant.shopName}}</td>
                <td>{{merchant.address}}</td>
                <td>{{merchant.createTime | formateDate}}</td>
                <td>
                    <button class="btn btn-info" ng-click="viewDetail(merchant)" data-toggle="modal" data-target="#viewModal">Detail</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    </div>

    <!-- 查看详情modal -->
    <div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Detail Page</h4>
                </div>
                <div class="modal-body">
                    <table class="table" id="processMer">
                        <tr>
                            <td>ID-Card：</td>
                            <td><div class="col-sm-10"><img src="{{imgUrl}}{{detailMerchant.imgCard}}" width="250px" height="150px" class="img-rounded" ></div></td>
                        </tr>
                        <tr>
                            <td>Head：</td>
                            <td><div class="col-sm-10"><img src="{{imgUrl}}{{detailMerchant.imgHead}}" width="250px" height="150px" class="img-rounded" ></div></td>
                        </tr>
                        <tr>
                            <td>Name：</td>
                            <td><div class="col-sm-10"><input type="text" class="form-control" disabled="disabled" ng-model="detailMerchant.mName" /></div></td>
                        </tr>
                        <tr>
                            <td>ShopName：</td>
                            <td><div class="col-sm-10"><input type="text" class="form-control" disabled="disabled" ng-model="detailMerchant.shopName" /></div></td>
                        </tr>
                        <tr>
                            <td>Address：</td>
                            <td><div class="col-sm-10"><input type="text" class="form-control" disabled="disabled" ng-model="detailMerchant.address"/></div></td>
                        </tr>
                        <tr>
                            <td>Status：</td>
                            <td><div class="col-sm-10"><input type="text" class="form-control" disabled="disabled" value="{{detailMerchant.status | formatStatus}}"/></div></td>
                        </tr>
                        <tr>
                            <td>Is-Banded：</td>
                            <td><div class="col-sm-10"><input type="text" class="form-control" disabled="disabled" value="{{detailMerchant.ban | formatBan}}"/></div></td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>